<template>
    <!-- 组件设置 -->
    <div class="com-setting">
        <component
            v-if="componentShow"
            :is="getComponent(activeCol.type)"
            :curryCom="activeCol"
        />
    </div>
</template>
<script>
export default {
    props: {
        curryCom: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    watch: {
        curryCom: {
            handler: function(newVal) {
                this.activeCol = newVal
                if (
                    JSON.stringify(this.activeCol) !== '{}' &&
                    JSON.stringify(this.activeCol.value) !== '{}'
                ) {
                    this.componentShow = true
                } else {
                    this.componentShow = false
                }
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            // 当前选中的控件
            activeCol: {},
            componentShow: false
        }
    },

    methods: {
        /**
         * 动态获取子组件
         */
        getComponent(type) {
            try {
                return require('./' + type + '.vue').default
            } catch (error) {
                return require('./error.vue').default
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.com-setting {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );

    overflow-y: auto;
}
</style>
